<template>
	<view>
		<basetab name='浏览历史'></basetab>
		<view class="pageView">
			<view class="fr-a-s" style="width: 100%; background-color: #fff;border-bottom: 2rpx solid rgba(238, 238, 238, 1);; ">
				<view style="padding: 26rpx 0;" v-for="(item, index) in tablist" :key="index" :class="tabindex == index ? 'active' : ' '" @click="changtap(index)">{{ item.name || '' }}</view>
			</view>
			
			<view style="" >
					<view  v-if="tabindex==0" v-for="(item,index) in list" :key="index"   class="fr-b-c" style="padding: 20rpx 50rpx; background-color: #fff; margin-top: 20rpx;">
						<view style="position: relative;">
							<image style="width: 180rpx;height: 200rpx;" src="../../static/logo.png" mode=""></image>
							<image v-if="index==0" style="width: 80rpx; height: 24rpx;position: absolute; top: 0; left: 0;" src='../../static/my/tory1.png' mode=""></image>
							<text v-if="index==0" class="s2">限免</text>
							<image v-if="index==1" style="width: 80rpx; height: 24rpx;position: absolute; top: 0; left: 0;" src='../../static/my/tory2.png' mode=""></image>
							<text v-if="index==1" class="s2">VIP</text>
							<image v-if="index==2" style="width: 80rpx; height: 24rpx;position: absolute; top: 0; left: 0;" src='../../static/my/tory3.png' mode=""></image>
							<text v-if="index==2" class="s2">收费</text>
						</view>
						<view class="m-l-20" >
							<view class="fr-b-c">
								<view class="s1">
									课程名称名称
								</view>
								<view class="s3">
									删除记录
								</view>
							</view>
							<view class="s4 ">
								课程简介课程简介课程简介课程简介程简介程简介程简介程简介程简程简介程简介程简
							</view>
							<view class="m-t-10 s5">
								主讲人：名称
							</view>
							<view class="fr-b-c m-t-40">
								<view class="s6">
									发布时间：2020-03-04-21
								</view>
								<view class="fr-c">
									<image style="width: 20rpx;height: 20rpx;" src="../../static/my/bo.png" mode=""></image>
									<view class="s7 m-l-10">
										30004播放
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="" v-if="tabindex==1" v-for="(item,index) in list" :key="index" style="background-color: #fff; margin-top: 20rpx; padding: 20rpx 32rpx;"  >
						<view class="font-size: 24rpx;font-weight: 500;color: rgba(0, 0, 0, 1);">
							浏览时间:2020-03-04
						</view>
						<view class="bgs m-t-20" style="position: relative;">
							<image  style="width: 120rpx; height: 40rpx;position: absolute; top: 0; left: 0;" src='../../static/my/ku.png' mode=""></image>
							<text  style="position: absolute;top: 2rpx;left: 5rpx; font-size: 24rpx;font-weight: 500;color: rgba(255, 255, 255, 1);">特别推荐</text>
							<view  style=" display: flex; align-items: flex-end; justify-content: space-between; height:100% ; margin: 10rpx ;" >
								<view class="" style=" font-size: 24rpx;font-weight: 700;color: rgba(255, 255, 255, 1);margin-bottom: 20rpx;  ">
									推荐老师Hello 贰月
								</view>
								<view style="margin-bottom: 20rpx;">
									<view style="color: #fff; opacity: 1;border-radius: 25rpx; border: 1rpx solid #fff; padding: 3rpx 10rpx;font-size: 16rpx;font-weight: 500;">
										参与次数:102301次
									</view>
									<view style="margin-top: 10rpx; color: #fff; opacity: 1;border-radius: 25rpx; border: 1rpx solid #fff; padding: 3rpx 10rpx;font-size: 16rpx;font-weight: 500;">
										参与次数:102301次
									</view>
								</view>
							</view>
						</view>
					</view>
			</view>
			<view  v-if="!list.length>=1" class="fr-c-d">
			
				<view style="margin-bottom: 80rpx;margin-top: 380rpx;">
					<image style="width: 200rpx; height: 190rpx;" src='../../static/my/liu.png' mode=""></image>
				</view>
				<view style="font-size: 24rpx;font-weight: 400;color: rgba(204, 204, 204, 1);">
					小主，您还没有任何的收藏哦
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import basetab from '../../componets/bartop.vue'
	export default {
		components:{
		
			basetab
		
		},
		data() {
			return {
				tabindex:0,
				list:[
					{name:1},
					{name:1},
					{name:1}
				],
				tablist : [
					{
						name: '商学院课程'
					},
					{
						name: '项目库'
					},
					{
						name: '商城商品'
					}
				]
			}
		},
		methods: {
			changtap(index) {
				this.tabindex = index;
			},
		}
	}
</script>

<style>
	.bgs{
		width: 684rpx;
		height: 240rpx;
		opacity: 1;
		border-radius: 10px;
		background: url(https://img.js.design/assets/smartFill/img268164da72e058.jpeg) no-repeat;
		background-size:100% 100%;
		
		background-attachment:fixed;
		/* background-image: url('	https://static.699pic.com/images/diversion/58c6bd759e279cc57659f82fb79e0956.jpg'); */
	}
	.s2{
		position: absolute; 
		top: 12rpx;
		left: 15rpx;
		font-size: 16rpx;
		font-weight: 500;
		letter-spacing: 0px;
		line-height: 0px;
		color: rgba(255, 255, 255, 1);
	}
	.s1{
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 0px;
		line-height: 0px;
		color: rgba(0, 0, 0, 1);
	}
	.s3{
	font-size: 24rpx;
	font-weight: 500;
	letter-spacing: 0px;
	line-height: 0px;
	color: rgba(212, 48, 48, 1);
	}
	.s4{
		
		margin-top: 12rpx;
		font-size: 22rpx;
		font-weight: 400;
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		color: rgba(204, 204, 204, 1);
	}
	.s5{
		font-size: 20rpx;
		font-weight: 500;
		
		color: rgba(0, 0, 0, 1);
	}
	.s6{
		font-size: 14rpx;
		font-weight: 400;
	
		color: rgba(204, 204, 204, 1);
	}
	.s7{
		font-size: 14rpx;
		font-weight: 400;
	
		color: rgba(255, 141, 26, 1);
	}
.active {
	
	border-bottom:1rpx solid rgba(255, 135, 2, 1);
}
</style>
